<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>员工详情
      </p>
      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert(5,5)">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 新增&&编辑员工 -- start-->
    <div class="contaner_staff">
      <div id="head_portrait">
        <!-- 头像 --start-->
        <div class="log">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </div>
        <!-- 头像 --end-->
        <div id="log_bottom1">
          <el-input v-model="departName" style="width:70%"></el-input>
          <el-input v-model="postName" style="width:70%;margin:10px 0;"></el-input>
          <el-input v-model="jiXiao" style="width:70%"></el-input>
        </div>
      </div>

      <div id="table_box44">
        <div class="basemess">
          <table width="100%" height="100%">
            <!-- <tr>
              <td width="100%" colspan="10">员工信息</td>
            </tr>-->
            <tr>
              <td width="10%" colspan="1">姓名</td>
              <td width="24%" colspan="3">{{name}}</td>
              <td width="10%" colspan="1">性别</td>
              <td width="23%" colspan="2">{{sexVal}}</td>
              <td width="10%" colspan="1">民族</td>
              <td width="23%" colspan="2">{{nation}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">出生年月</td>
              <td width="24%" colspan="3">{{birth}}</td>
              <td width="10%" colspan="1">籍贯</td>
              <td width="23%" colspan="2">{{nativePlace}}</td>
              <td width="10%" colspan="1">婚姻状况</td>
              <td width="23%" colspan="2">{{marrayVal}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">联系电话</td>
              <td width="24%" colspan="3">{{telephone}}</td>
              <td width="10%" colspan="1">身份证号码</td>
              <td width="23%" colspan="2">{{idNumber}}</td>
              <td width="10%" colspan="1">角色分配</td>
              <td width="23%" colspan="2">{{roleName}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">户籍地址</td>
              <td width="90%" colspan="9">{{permanentaddress}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">现住址</td>
              <td width="90%" colspan="9">{{addressnow}}</td>
            </tr>

            <tr>
              <td width="10%" colspan="1">专业社会职称</td>
              <td width="24%" colspan="3">{{sociology}}</td>
              <td width="10%" colspan="1">取得时间</td>
              <td width="23%" colspan="2">{{getdate}}</td>
              <td width="10%" colspan="1">最高学历</td>
              <td width="23%" colspan="2">{{educationMax}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">毕业院校</td>
              <td width="24%" colspan="3">{{graduateUniversity}}</td>
              <td width="10%" colspan="1">专业</td>
              <td width="23%" colspan="2">{{major}}</td>
              <td width="10%" colspan="1">毕业时间</td>
              <td width="23%" colspan="2">{{graduateDate}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">外语水平</td>
              <td width="24%" colspan="3">{{languagegrade}}</td>
              <td width="10%" colspan="1">语种</td>
              <td width="23%" colspan="2">{{language}}</td>
              <td width="10%" colspan="1">计算机水平</td>
              <td width="23%" colspan="2">{{computer}}</td>
            </tr>
            <tr>
              <td width="10%" colspan="1">签订合同时间</td>
              <td width="24%" colspan="3">{{laborcontractStart}}</td>
              <td width="10%" colspan="1">合同到期时间</td>
              <td width="23%" colspan="2">{{laborcontractEnd}}</td>
              <td width="10%" colspan="1">提前提醒时间</td>
              <td width="23%" colspan="2">{{remind}}</td>
            </tr>
          </table>
          <table width="100%">
            <tr class="tr1">
              <td width="100%" colspan="8">最高学历</td>
            </tr>
            <tr class="tr2">
              <td width="25%" colspan="2">起止时间</td>
              <td width="25%" colspan="2">学校/教育机构名称</td>
              <td width="25%" colspan="2">所学专业/技能</td>
              <td width="25%" colspan="2">取得文凭/资格证书</td>
            </tr>
            <tr class="tr3" v-for="(item,index) in xuelival" :key="index">
              <td width="25%" colspan="2">{{item.start}}--{{item.end}}</td>
              <td width="25%" colspan="2">{{item.school}}</td>
              <td width="25%" colspan="2">{{item.specialty}}</td>
              <td width="25%" colspan="2">{{item.diploma}}</td>
            </tr>
          </table>
          <table width="100%" height="100%">
            <tr>
              <td width="100%" colspan="10">工作履历</td>
            </tr>
            <tr>
              <td width="23%" colspan="2">起止时间</td>
              <td width="24%" colspan="3">公司名称</td>
              <td width="10%" colspan="1">职位</td>
              <td width="10%" colspan="1">薪资</td>
              <td width="10%" colspan="1">离职原因</td>
              <td width="10%" colspan="1">证明人</td>
              <td width="13%" colspan="1">证明人电话</td>
            </tr>
            <tr v-for="(item,index) in workvalue" :key="index">
              <td width="23%" colspan="2">{{item.start}}--{{item.end}}</td>
              <td width="24%" colspan="3">{{item.compony}}</td>
              <td width="10%" colspan="1">{{item.duty}}</td>
              <td width="10%" colspan="1">{{item.salary}}</td>
              <td width="10%" colspan="1">{{item.reason}}</td>
              <td width="10%" colspan="1">{{item.certifier}}</td>
              <td width="13%" colspan="1">{{item.phone}}</td>
            </tr>
            <!-- /////////////////////////////////////////////////////////////////////////////////// -->
            <tr>
              <td width="100%" colspan="10">家庭情况</td>
            </tr>
            <tr>
              <td width="20%" colspan="2">姓名</td>
              <td width="20%" colspan="2">与本人关系</td>
              <td width="20%" colspan="2">出生年月</td>
              <td width="10%" colspan="1">工作单位</td>
              <td width="10%" colspan="1">职务</td>
              <td width="20%" colspan="2">联系电话</td>
            </tr>
            <tr v-for="(item,index,ss) in family" :key="ss">
              <td width="20%" colspan="2">{{item.name}}</td>
              <td width="20%" colspan="2">{{item.relation}}</td>
              <td width="20%" colspan="2">{{item.birth}}</td>
              <td width="10%" colspan="1">{{item.workunit}}</td>
              <td width="10%" colspan="1">{{item.duty}}</td>
              <td width="20%" colspan="2">{{item.phone}}</td>
            </tr>
            <tr height="150">
              <td width="10%" colspan="1">合同</td>
              <td width="90%" colspan="9">
                <el-image
                  style="width: 100px; height: 100px; margin:10px;"
                  :src="k"
                  v-for="k in contractImage"
                  :key="k"
                  :preview-src-list="contractImage"
                ></el-image>
              </td>
            </tr>
          </table>
        </div>
        <div width="100%" class="btn">
          <el-button type="info" size="medium" @click="revert(5,5)">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      lizhi: { time: "", reasons: "" },
      creater: 0,
      // imageUrl: "",
      imageUrl1: "",
      dialogImageUrl: "",
      dialogVisible55: false,
      obj: {},

      //

      disabled1: false,
      //
      checkAll2: false,
      checkAll: false, //部门

      imageUrl: "",
      image: "",//头像/后台
      departName: "",
      departId: 0,//部门Id后台参数
      postName: "",
      postId: 0,//岗位Id//后台
      jiXiao: "", //绩效系数/后台参数
      name: "", //姓名/后台
      pass: "123456",//密码/后台
      sexVal: "男",
      sex: 1, //性别/后台
      nation: "汉族",//民族/后台
      birth: "", //出生年月/后台
      nativePlace: "", //籍贯/后台
      marrayVal: "未婚",
      marray: 1, //婚姻状况/后台
      telephone: "", //联系电话/后台
      idNumber: "", //身份证号码/后台
      roleName: "",//岗位名称
      roleCodeList: [], //入职岗位/后台
      permanentaddress: "", //户籍地址/后台
      addressnow: "", //现住址/后台
      sociology: "", //专业社会职称/后台
      getdate: "", //取得时间/后台
      educationMax: "", //最高学历/后台
      graduateUniversity: "", //毕业学校/后台
      major: "", //专业/后台
      graduateDate: "", //毕业时间/后台
      languagegrade: "", //外语水平/后台
      language: "", //语种/后台/后台
      computer: "", //计算机水平/后台
      laborcontractStart: "", //签订合同日期/后台
      laborcontractEnd: "", //合同到期时间/后台
      remind: "", //提前提醒周期/后台      
      xuelival: [{ start: "", end: "", startendtime: "", school: "", specialty: "", diploma: "" }], //最高学历/后台
      workvalue: [
        { start: "", end: "", workstartendtime: "", compony: "", duty: "", salary: "", reason: "", certifier: "", phone: "" },
        { start: "", end: "", workstartendtime: "", compony: "", duty: "", salary: "", reason: "", certifier: "", phone: "" },
        { start: "", end: "", workstartendtime: "", compony: "", duty: "", salary: "", reason: "", certifier: "", phone: "" },
      ],//工作履历/后台
      family: [
        { name: "", relation: "", birth: "", workunit: "", duty: "", phone: "" },
        { name: "", relation: "", birth: "", workunit: "", duty: "", phone: "" },
        { name: "", relation: "", birth: "", workunit: "", duty: "", phone: "" },
      ],//家庭情况/后台
      contractImageUrl: "",
      contractImage: [],//合同/后台
      dialogVisible: false,
      departList: [],
      roleList: [],
      postList: [],

      age: "", //年龄
      hobby: "", //特长爱好
      workinghours: "", //参加工作时间
      entrytime: "", //可入职时间
      salary: "", //薪资
      remindertime: "", //社保缴纳
      Mark: 0,
      //地址栏传参
      id: 0,
      state: 0,
      // train: [
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      // ],//培训情况/后台



      //奖惩记录
      punishmentval: [{}, {}, {}],
      sexvalue: [{ value: 1, label: "男" }, { value: 2, label: "女" }],
      postvalue: [],
      nationvalue: [
        { label: "汉族" },
        { label: "蒙古族" },
        { label: "回族" },
        { label: "藏族" },
        { label: "维吾尔族" },
        { label: "苗族" },
        { label: "彝族" },
        { label: "壮族" },
        { label: "布依族" },
        { label: "朝鲜族" },
        { label: "满族" },
        { label: "侗族" },
        { label: "瑶族" },
        { label: "白族" },
        { label: "土家族" },
        { label: "哈尼族" },
        { label: "哈萨克族" },
        { label: "傣族" },
        { label: "黎族" },
        { label: "傈僳族" },
        { label: "佤族" },
        { label: "畲族" },
        { label: "高山族" },
        { label: "拉祜族" },
        { label: "水族" },
        { label: "东乡族" },
        { label: "纳西族" },
        { label: "景颇族" },
        { label: "柯尔克孜族" },
        { label: "土族" },
        { label: "达斡尔族" },
        { label: "仫佬族" },
        { label: "羌族" },
        { label: "布朗族" },
        { label: "撒拉族" },
        { label: "毛南族" },
        { label: "仡佬族" },
        { label: "锡伯族" },
        { label: "阿昌族" },
        { label: "普米族" },
        { label: "塔吉克族" },
        { label: "怒族" },
        { label: "乌孜别克族" },
        { label: "俄罗斯族" },
        { label: "鄂温克族" },
        { label: "德昂族" },
        { label: "保安族" },
        { label: "裕固族" },
        { label: "京族" },
        { label: "塔塔尔族" },
        { label: "独龙族" },
        { label: "鄂伦春族" },
        { label: "赫哲族" },
        { label: "门巴族" },
        { label: "珞巴族" },
        { label: "基诺族" }
      ],
      educationvalue: [
        { label: "初中" },
        { label: "高中" },
        { label: "中专" },
        { label: "大专" },
        { label: "本科" },
        { label: "研究生" },
        { label: "硕士" },
        { label: "博士" }
      ],
      marriagevalue: [{ value: 1, label: "未婚" }, { value: 2, label: "已婚" }, { value: 3, label: "离异" }],
      coefficientvalue: [
        { key: 0.8, value: "0.8" },
        { key: 0.9, value: "0.9" },
        { key: 1.0, value: "1.0" },
        { key: 1.1, value: "1.1" },
        { key: 1.2, value: "1.2" }
      ],
      departmentvalue: [],
      pic: [],
      bmpage: false,
      isIndeterminate: true,
      checkedCities: [],
      xaifaval: [],
      isIndeterminate2: true,
      checkedCities2: [],
      xaifaval2: [],
      gangwei: {},
      radio: [],
    };
  },
  created () {
    //地址栏传参
    this.id = this.$route.query.e;
    this.state = this.$route.query.state;
    //获取详情
    if (this.id != 0) { this.getDetail(); }
  },
  methods: {
    //获取详情    
    getDetail () {
      var obj = { id: this.id };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PersonnelMatters.asmx/GetData?index=3&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        if (list != null) {
          console.log(list)
          this.imageUrl = list.basemess.Image;
          this.departName = list.departName; this.departId = list.basemess.departId;
          this.postName = list.postName; this.postId = list.basemess.postId;
          this.jiXiao = list.jixiao;
          this.name = list.basemess.Name; this.sexVal = list.sexVal; this.sex = list.basemess.sex; this.nation = list.basemess.Nation;
          this.birth = list.birth; this.nativePlace = list.basemess.Nativeplace; this.marrayVal = list.marrayVal; this.marray = list.basemess.Marray;
          this.telephone = list.basemess.Telephone; this.idNumber = list.basemess.IDnumber;
          this.permanentaddress = list.basemess.Permanentaddress; this.addressnow = list.basemess.Addressnow;
          for (var i = 0; i < list.roleNameStr.length; i++) { this.roleName += list.roleNameStr[i] + "," }
          this.roleCodeList = list.roleName;
          this.sociology = list.basemess.sociology; this.getdate = list.getdate; this.educationMax = list.basemess.Educationmax;
          this.graduateUniversity = list.basemess.GraduateUniversity; this.major = list.basemess.Major; this.graduateDate = list.graduateDate
          this.languagegrade = list.basemess.languagegrade; this.language = list.basemess.language; this.computer = list.basemess.computer;
          this.laborcontractStart = list.laborcontractStart; this.laborcontractEnd = list.laborcontractEnd; this.remind = list.remind;
          this.xuelival = list.xueli;
          this.workvalue = list.work;
          this.family = list.family;
          for (var i = 0; i < list.contractImage.length; i++) { if (list.contractImage[i] != "") { this.contractImage.push(list.contractImage[i]); } }
        }
      });
    },
    //返回
    revert (index, index2) {
      this.$router.push({
        path: "/EmployeeLiZhiList",
        query: { index: index, index2: index2 }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.block {
  display: flex;
  align-items: center;
}
.lizhi {
  width: 60%;
  margin-left: 10px;
}
ul li {
  margin-top: 10px;
  span {
    display: inline-block;
    width: 100px;
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.contaner_staff {
  background: $white;
  display: flex;
  margin: 0 1%;
  justify-content: space-between;
}
table {
  border-collapse: collapse;
  text-align: center;
  color: rgb(128, 129, 131);
}
table tr td {
  height: 50px;
  border: solid 1px rgb(180, 181, 184);
}
#head_portrait {
  width: 13%;
  padding-left: 1%;
  text-align: center;
  // border: solid 1px red;
}
#table_box44 {
  width: 84%;
  height: 800px;
  // overflow: auto;
  background: $white;
}
.basemess {
  width: 95%;
  overflow: auto;
  height: 700px;
  margin-top: 20px;
}
.btn {
  text-align: center;
  margin-top: 20px;
}
.tr1 td {
  border-top: none;
  border-left: solid 1px rgb(180, 181, 184);
  border-right: solid 1px rgb(180, 181, 184);
}
.tr2 td {
  border: solid 1px rgb(180, 181, 184);
}
.tr3 td {
  border: solid 1px rgb(180, 181, 184);
  border-bottom: none;
}
.log {
  height: 148px;
  margin-top: 10px;
}
.bmpage {
  //border: solid 1px red;
}
#log_bottom1 {
  height: 100px;
  padding-top: 10px;
  //border: solid 1px red;
}
.bottom {
  background: $white;
  text-align: center;
  margin-top: 10px;
}
</style>
<style >
#table_box44 .el-input__inner {
  border: none;
  color: rgb(128, 129, 131);
  /* font-size: 12px; */
  width: 100%;
}
#table_box44 .el-select {
  width: 100%;
}
#table_box44 .el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#log_bottom1 .el-select .el-input__inner {
  text-align: center;
  margin-top: 10px;
}

#table_box13 .avatar-uploader {
  height: 300px;
}
#head_portrait .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#head_portrait .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#head_portrait .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
#head_portrait .avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.el-dialog__footer {
  text-align: center;
}
</style>
